<template>
  <view class="out">
    <input type="text" v-model="firstName" placeholder="请输入名">
    <input type="text" v-model="lastName" placeholder="请输入姓">
    <view>全称：{{fullName}}</view>
  </view>
</template>

<script setup>
  import { ref, watch, watchEffect } from 'vue'
  const firstName = ref('万克尔')
  const lastName = ref('乔丹')

  const fullName = ref('')

  /* 监听多值
  watch([firstName, lastName], ([nFirst, nLast], [oFirst, oLast]) => {
    console.log(nFirst, nLast)
    console.log(oFirst, oLast)
  })
  */
  watchEffect(() => {
    console.log(firstName.value, lastName.value)
  })
</script>

<style lang="scss">
  .out {
    padding: 20px;

    input {
      border: 1px solid #ccc;
      height: 40px;
      margin: 10px 0;
      padding: 0 10px;
    }
  }
</style>